<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
  <style>
    canvas {
      border: 1px solid #eee;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="500" height="300"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw a filled arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength) {
      const angle = Math.atan2(toY - fromY, toX - fromX);
      
      ctx.save();
      ctx.strokeStyle = 'black';
      ctx.fillStyle = 'black';
      ctx.lineWidth = 2;

      // Draw line
      ctx.beginPath();
      ctx.moveTo(fromX, fromY);
      ctx.lineTo(toX, toY);
      ctx.stroke();

      // Draw arrowhead
      ctx.beginPath();
      ctx.moveTo(toX, toY);
      ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
      ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }

    // --- Drawing Parameters ---
    const yLine = 120;
    const scaleA = 80;
    const length1 = scaleA;
    const length2 = 3 * scaleA;
    const totalLength = length1 + length2;
    
    const startX = (canvas.width - totalLength) / 2;
    
    const x1 = startX;
    const x2 = startX + totalLength;
    const xPin = startX + length1;
    
    const ballRadius = 6;
    const pinRadius = 4;
    const arrowLength = 45;
    const arrowHeadLength = 12;

    // --- Drawing ---
    
    // Set common styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // 1. Draw the main line (soft string)
    ctx.beginPath();
    ctx.moveTo(x1, yLine);
    ctx.lineTo(x2, yLine);
    ctx.stroke();

    // 2. Draw Ball 1 and its arrow/label
    ctx.beginPath();
    ctx.arc(x1, yLine, ballRadius, 0, 2 * Math.PI);
    ctx.fill();
    drawArrow(ctx, x1, yLine, x1, yLine + arrowLength, arrowHeadLength);
    ctx.font = '24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('1', x1 - 25, yLine);

    // 3. Draw Ball 2 and its arrow/label
    ctx.beginPath();
    ctx.arc(x2, yLine, ballRadius, 0, 2 * Math.PI);
    ctx.fill();
    drawArrow(ctx, x2, yLine, x2, yLine + arrowLength, arrowHeadLength);
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('2', x2 + 25, yLine);

    // 4. Draw the pin (钉)
    const yPinDot = yLine + 35;
    const yPinLabel = yLine + 60;
    ctx.beginPath();
    ctx.arc(xPin, yPinDot, pinRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = '24px "KaiTi", "SimSun", serif'; // Use common Chinese fonts
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText('钉', xPin, yPinLabel);

    // 5. Draw the length labels
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textBaseline = 'bottom';
    ctx.textAlign = 'center';
    
    // Label 'a'
    ctx.fillText('a', x1 + length1 / 2, yLine - 10);
    
    // Label '3a'
    ctx.fillText('3a', xPin + length2 / 2, yLine - 10);

  </script>
</body>
</html>